<template>
  <div class="mainbody">
    <el-form :model="listQuery"
             ref="queryForm"
             size="small"
             :inline="true"
             label-width="100px">
      <el-form-item label="月子名称"
                    prop="yueziName">
        <el-input v-model="listQuery.postpartum_name"
                  placeholder="请输入"
                  clearable />
      </el-form-item>
      <el-form-item label="活动名称"
                    prop="active_name">
        <el-input v-model="listQuery.active_name"
                  placeholder="请输入"
                  clearable />
      </el-form-item>
      <el-form-item label="所在地区"
                    prop="area">
        <el-cascader ref="cascader"
                     clearable
                     placeholder="请选择地区"
                     :props="cascaderProps"
                     :options="cityOptions"
                     v-model="listQuery.area"></el-cascader>
      </el-form-item>
      <el-form-item label="活动人群"
                    prop="activePer">
        <el-select v-model="listQuery.crowd_type"
                   placeholder="请选择">
          <el-option v-for="item in activePerOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需要礼包类型"
                    prop="giftType">
        <el-select v-model="listQuery.gift_type"
                   placeholder="请选择">
          <el-option v-for="item in giftTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动日期"
                    prop="activeData">
        <el-date-picker v-model="listQuery.activeData"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleFilter">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="reset">重置</el-button>
        <el-button type="primary"
                   icon="el-icon-download"
                   @click="exportFile">导出</el-button>
        <el-button type="primary"
                   icon="el-icon-download"
                   :v-show="exportFileListFlag"
                   @click="getExportList"></el-button>
      </el-form-item>

    </el-form>
    <!-- 表格区域 -->
    <div class="table-wrapper">
      <el-table :data="list"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                style="width: 100%"
                :height="tableHeight"
                stripe
                border>
        <el-table-column prop="postpartum_name"
                         fixed
                         label="月子中心名称"
                         align="center"
                         width="180" />
        <el-table-column prop="active_name"
                         label="活动名称"
                         align="center"
                         width="180" />
        <el-table-column label="所在地区"
                         align="center"
                         width="120">
          <template slot-scope="props">
            <span> {{ props.row.provinces }} / {{ props.row.city }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="description"
                         label="活动简介"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.description"
                        placement="top">
              <div style="
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
              ">
                {{ scope.row.description }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="活动人群"
                         width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.crowd_type|CrowdType }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="活动日期"
                         width="200">
          <template slot-scope="props">
            <span> {{ props.row.active_cycle_begin }} 至 {{ props.row.active_cycle_end }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="活动时间"
                         width="200">
          <template slot-scope="props">
            <span> {{ props.row.active_time_begin }} -- {{ props.row.active_time_end }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="active_num"
                         align="center"
                         label="活动人数"
                         width="120" />
        <el-table-column prop="contact_name"
                         align="center"
                         label="负责人姓名"
                         width="120" />
        <el-table-column prop="contact_tel"
                         align="center"
                         label="负责人电话"
                         width="120" />
        <el-table-column align="center"
                         label="礼包类型">
          <template slot-scope="scope">
            <span>{{ scope.row.gift_type|GiftType }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格区域完 -->

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page"
                     :page-sizes="[20,50,100,200]"
                     :page-size="listQuery.page_size"
                     :total="total"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!-- 导出文件对话框 -->
    <outterDrawer :drawerObj="this.drawerObj"
                  :scene="this.exportScene"
                  ref="child" />
  </div>
</template>

<script>
import { getActiveList } from '@/api/system/active'
//导入导出文件组件
import outterDrawer from '@/components/Drawer'
//导入 城市js
import cityData from "@/static/cityOption"

const giftTypeOptions = [
  { value: 0, label: '伴手礼' },
  { value: 1, label: '签单礼' },
  { value: 2, label: '抽奖礼' },
]
const activePerOptions = [
  { value: 0, label: '签约宝妈' },
  { value: 1, label: '未签约宝妈' },
  { value: 2, label: '签约与未签约宝妈' },

]
export default {
  components: { outterDrawer },
  filters: {
    CrowdType (val) {
      const key = {
        0: '签约宝妈',
        1: '未签约宝妈',
        2: '签约与未签约宝妈'
      }
      return key[val]
    },
    GiftType (val) {
      const key = {
        0: '伴手礼',
        1: '签单礼',
        2: '抽奖礼'
      }
      return key[val]
    },
  },
  data () {
    return {
      drawerObj: {
        size: "500px",
        drawer: false,
        title: '导出列表'
      },
      exportFileListFlag: false,
      listLoading: true,
      exportScene: 1,
      total: 0,
      list: null,
      listQuery: {
        page: 1,
        page_size: 20,
        postpartum_name: "",
        active_name: "",//活动名称
        provinces: "",//省份
        city: "",//城市
        crowd_type: "",//活动人群
        gift_type: "",//礼物类型
        activeData: [], //
        area: [],
        active_cycle_begin: "",
        active_cycle_end: "",
        keyword: '',
        keyword_field: '',
        sort_field: 'active_id',
        sort_order: 'desc'
      },
      //省市区
      cityOptions: cityData,
      giftTypeOptions,
      activePerOptions,
      //级联选择器
      cascaderProps: {
        value: "name",
        label: "name",
        children: "children"
      },
      //downLoad Data
      downLoadData: {},
      fileInfoList: {}
    }
  },
  methods: {
    getList () {
      this.listLoading = true
      this.handleQueryData();
      getActiveList(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.page_size = val
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleQueryData () {
      if (this.listQuery.area !== undefined && this.listQuery.area.length > 0) {
        this.listQuery.provinces = this.listQuery.area[0]
        this.listQuery.city = this.listQuery.area[1]
      } else {
        this.listQuery.provinces = null
        this.listQuery.city = null
      }
      if (Array.isArray(this.listQuery.activeData) && this.listQuery.activeData.length > 0) {
        this.listQuery.active_cycle_begin = this.listQuery.activeData[0]
        this.listQuery.active_cycle_end = this.listQuery.activeData[1]
      } else {
        this.listQuery.active_cycle_begin = ''
        this.listQuery.active_cycle_end = ''
      }
    },
    //重置
    reset () {
      this.resetTemp()
      this.getList()
    },
    resetTemp () {
      this.listQuery = {
        page: 1,
        page_size: 20,
        postpartum_name: "",
        active_name: "",//活动名称
        provinces: "",//省份
        city: "",//城市
        crowd_type: "",//活动人群
        gift_type: "",//礼物类型
        activeData: [], //
        area: [],
        active_cycle_begin: "",
        active_cycle_end: "",
        keyword: '',
        keyword_field: '',
        sort_field: 'active_id',
        sort_order: 'desc'
      }
    },
    // 导出事件
    exportFile () {
      this.drawerObj.drawer = true
      this.drawerObj.title = "导出列表"
      this.$refs.child.processExport(this.listQuery)
    },
    getExportList () {
      this.drawerObj.drawer = true
      this.drawerObj.title = "历史导出列表"
      this.$refs.child.getExportFileList()
    },
  },
  computed: {
    tableHeight () {
      const fullHeight = document.documentElement.clientHeight
      console.log(fullHeight, 'fullHeight')
      return fullHeight - 290;
    }
  },
  created () {
    this.getList()
  }

}
</script>

<style lang="less" scoped>
.exportOut {
  margin-bottom: 10px;
}
/* 删除表格下横线 */
.table-wrapper {
  box-shadow: 5px 5px 15px #ccc;
}
.table-wrapper ::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>
